<template>
	<view class="container" :style="{ height: windowHeight + 'px' }">
		<view class="key-input">
			<view class="title">输入验证码</view>
			<view class="tips">验证码已发送至 {{ telString }}</view>
			<u-message-input class="code-input" font-size="46" :focus="true" :value="verify" @change="change" @finish="inputFinish" :maxlength="6" active-color="#F85962"></u-message-input>
			<text :class="{ error: errorShow }">{{ errorText }}</text>
			<view class="code-text" @tap.stop="getSmsCode">{{ sendTips }}</view>
		</view>
		<image class="login-code-image" src="@/static/images/login/login-code-image.png"></image>
		<u-verification-code :keep-running="true" unique-key="smsLogin" :seconds="seconds" end-text="收不到验证码，重新发送" ref="sendCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import { updateUserToken, updateRefereeCode } from '@/store/dispatches.js';
import { mapGetters } from 'vuex';
import { initIMService } from '@/store/dispatches.js';
export default {
	data() {
		return {
			verify: '',
			sendTips: null,
			autoSend: true,
			seconds: 60,
			windowHeight: null,
			mobile: null,
			errorText: '',
			errorShow: false,
		};
	},
	computed: {
		telString() {
			if (!this.mobile) {
				return '';
			}
			return Tools.phoneNumberProtection(this.mobile);
		},
		...mapGetters({
			refereeCode: 'getRefereeCode'
		})
	},
	onLoad(options) {
		this.mobile = options.mobile;
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
	},
	onUnload() {
	},
	onShow() {
		this.$nextTick(() => {
			this.autoSend && this.getSmsCode();
		});
	},
	methods: {
		// 收不到验证码选择时的选择
		getSmsCode() {
			if (this.$refs.sendCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				});
				this.$u.api
					.sendSmsCode(this.mobile, 'login')
					.then(res => {
						// 通知验证码组件内部开始倒计时
						this.$refs.sendCode.start();
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
					})
					.catch(e => {
						console.log(e);
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: e.data.msg
						});
					});
			}
			this.autoSend = false;
		},
		// change事件侦听
		change(value) {
			if (this.errorShow) {
				this.errorShow = false;
			}
		},
		// 输入完验证码最后一位执行
		inputFinish(value) {
			uni.showLoading({
				title: '正在登录...'
			});
			uni.hideKeyboard();
			this.$u.api
				.loginBySms(this.mobile, value, '', this.refereeCode)
				.then(res => {
					updateRefereeCode('');
					updateUserToken(res.data.token);
					this.refreshUserInfo();
				})
				.catch(e => {
					if (e.statusCode == 200) {
						this.errorText = e.data.msg;
						this.$nextTick(() => {
							this.errorShow = true;
						});
					}
				});
			// this.error = value != '123456';
			// console.log('finish', value);
		},
		codeChange(text) {
			this.sendTips = text;
		},
		completeUserInfo() {
			this.reLaunch();
			initIMService();
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx 50rpx;
	background-color: #fff;
	.code-input {
		/deep/.u-char-flex {
			justify-content: space-between;
		}
	}
}

.key-input {
	padding: 30rpx 0;
	text {
		display: none;
	}
	.error {
		display: block;
		color: red;
		font-size: 30rpx;
		margin: 20rpx 0;
	}
}

.title {
	font-size: 50rpx;
	color: #333;
}

.key-input .tips {
	font-size: 30rpx;
	color: #333;
	margin-top: 20rpx;
	margin-bottom: 60rpx;
}
.code-text {
	color: $u-type-warning;
	font-size: 26rpx;
	margin-top: 40rpx;
}
.login-code-image {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}
</style>
